<template>
  <contractLayout>
    <template slot="left">
      <contractList
        :pageInfo="contract.pager"
        placeholder="请输入物业名称"
        searchName="propertyNames"
        selectShow
        :selectOp="selectOp"
        v-loading="contract.loading"
        element-loading-text="数据加载中..."
      >
        <ul class="contractList">
          <li v-for="item in contract.tableData" :key="item.rentContractId" :class="{ active: item.active }" @click="changeAccountList(item.rentContractId)">
            <div class="top">
              <div class="title">{{ item.propertyNames }}</div>
              <div class="btnList">
                <span class="btn accounting" v-if="item.status == '10'" @click.stop="$refs.editReceive.show(item)">接收</span>
                <span class="btn accounting" v-if="item.status == '11'" @click.stop="$refs.editCheck.show(item)">核算</span>
                <span class="btn viewContract" @click.stop="$refs.contractView.show(item.rentContractId) ">查看合同</span>
              </div>
            </div>
            <el-row>
              <span class="status" :class="item.status == '10' ? 'white' : 'blue'">{{item.status == '10'?'未接收':'已接收'}}</span>
              <span class="status" :class="['10','11'].includes(item.status) ?'white':'blue'">{{['10','11'].includes(item.status) ? '未核算' : '已核算'}}</span>
            </el-row>
            <el-row>
              <el-col :span="8">建筑面积</el-col>
              <el-col :span="16">{{ item.buildingArea }}㎡</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">租赁周期:</el-col>
              <el-col :span="16">{{ item.startDate }}至{{item.endDate}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">物业地址:</el-col>
              <el-col :span="16" :title="item.address">{{ item.address }}</el-col>
            </el-row>
          </li>
        </ul>
      </contractList>
    </template>
    <div class="accountWarp" v-loading="account.loading" element-loading-text="数据加载中...">
      <h3 class="top-right">应收信息</h3>
      <dataList
        :pageInfo="account.pager"
        placeholder="搜索物业名称"
        :filterList="account.filterList"
        :listData="account.tableData"
        searchName="propertyNames"
        :menuList="[]"
        noPadding
        :listLayout="['menu','filter']"
      >
        <el-table ref="multipleTable" :data="account.tableData">
          <el-table-column label="付款项目" width="100" align="center" prop="chargeProjectName" />
          <el-table-column label="费用周期" align="center" prop="costPeriodStart" width="200">
            <template slot-scope="scope">{{ scope.row.costPeriodStart }}至{{ scope.row.costPeriodEnd}}</template>
          </el-table-column>
          <el-table-column label="应付日期" align="center" prop="receivableDate" width="100" />
          <el-table-column label="承租方" align="center" prop="customerName" width="200" />
          <el-table-column label="应付金额" align="center" prop="receivableMoney" width="100" />
        </el-table>
      </dataList>
      <edit-check ref="editCheck" @resetList="getListData" @getTabListData="getTabListData"></edit-check>
      <edit-receive ref="editReceive" @resetList="getListData" @getTabListData="getTabListData"></edit-receive>
      <contract-view ref="contractView"></contract-view>
    </div>
  </contractLayout>
</template>

<script>
import {
  fetchList,
  getRentContractPageList,
} from '@/views/rent/api/rent-contract-acceptance.js'
import editCheck from '../edit/edit-check'
import editReceive from '../edit/edit-receive'
import { downloadBlob } from '@/utils'
import { download } from '@/admin/api/common'
import { console } from 'vuedraggable/src/util/helper'
import { mapState } from 'vuex'
import contractView from '@/views/rent/contract/view.vue'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'
export default {
  components: {
    editCheck,
    editReceive,
    contractView,
  },
  provide () {
    return {
      // 更新核算列表
      initList: this.getListData,
      // 更新合同列表
      updateList: this.getTabListData,
    }
  },
  data () {
    return {
      selectOp: [{
        label: '核查状态',
        name: 'status',
        option: [{ label: '所有', value: '' }, { label: '待接收', value: '10' }, { label: '待核算', value: '11' }]
      }],
      contract: {
        // 列表数据
        tableData: [],
        // 请求参数
        params: {
          current: 1,
          size: 10,
          propertyNames: '',
          status: '',
        },
        // 分页
        pager: {
          total: 0, // 总页数
          current: 1, // 当前页数
          size: 10, // 每页显示多少条
        },
        // 页面loading
        loading: false,
      },
      // 核算列表请求参数
      account: {
        // 筛选列表
        filterList: [
          {
            label: '收款项目',
            inputType: 'dict',
            dictName: 'charge_project_type',
            name: 'chargeProjectName',
          },
          {
            label: '费用周期',
            inputType: 'daterange',
            name: ['costPeriodStart', 'costPeriodEnd'],
          },
          {
            label: '应收日期',
            inputType: 'daterange',
            name: 'receivableDate',
          },
          {
            label: '应收状态',
            inputType: 'dict',
            dictName: 'payable_status',
            name: 'receivableStatus',
          },
        ],
        // 表格列表数据
        tableData: [],
        // 请求参数
        params: {
          current: 1,
          size: 10,
          propertyNames: '',
        },
        // 分页
        pager: {
          total: 0, // 总页数
          current: 1, // 当前页数
          size: 10, // 每页显示多少条
        },
        // 页面loading
        loading: true,
      },
      NewIcon: require('@/assets/images/new.png'),
    }
  },
  beforeMount () {
    this.getListData()
    this.getTabListData()
  },
  methods: {
    // 切换核算列表
    changeAccountList (rentContractId) {
      this.contract.tableData = this.contract.tableData.map((item) => ({
        ...item,
        active: item.rentContractId == rentContractId,
      }))
      this.getListData({ rentContractId, current: 1 })
    },
    //  获取合同列表
    getTabListData (params = {}) {
      let req = { ...this.contract.params, ...params }
      getRentContractPageList(req)
        .then((res) => {
          const { current, size, total, records } = res.data.data
          this.contract.tableData = records.map((item, index) => ({
            ...item,
            active: index === 0,
          }))
          this.contract.params = req
          this.contract.pager = { total, current, size }
          if (records.length)
            this.getListData({
              rentContractId: records[0].rentContractId
            });
          else {
            this.account.tableData = [];
            this.account.loading = false;
          }
        })
        .catch(() => {
          this.account.loading = false
        })
        .finally(() => {
          this.contract.loading = false
        })
    },
    //获取核算列表
    getListData (params = {}) {
      this.account.loading = true
      let req = { ...this.account.params, ...params }
      fetchList(req)
        .then((res) => {
          const { current, size, total, records } = res.data.data
          this.account.tableData = records
          this.account.params = req
          this.account.pager = { total, current, size }
        })
        .finally(() => {
          this.account.loading = false
        })
    },
  },
}
</script>


<style lang="scss" >
@import "./index";
</style>
